var datas = {
    slideInfoData: null,
    imgHref: 'http://47.106.70.15:8000',
    myScroll: null,
};

function loadVideo(href) {
    // layer.open({
    //     content: '\
    //         <iframe src="http://player.youku.com/embed/XMzU5Mzc5NjYwMA==" allowscriptaccess="always"\
    //         allowfullscreen="true"\
    //         wmode="opaque"\
    //         allowTransparency="true"\
    //         frameborder="0"\
    //         type="application/x-shockwave-flash"></iframe>\
    //     ',
    //     shadeClose: false,
    //     btn: ['更多视频', '关闭'],
    //     yes: function() {
    //         layer.open({
    //             content: '视频列表',
    //             btn: '关闭'
    //         });
    //     },
    //     no: function(index) {
    //         layer.close(index);
    //     }
    // });

    // var bbb = '\
    //     <iframe src="http://player.youku.com/embed/XMzU5Mzc5NjYwMA==" allowscriptaccess="always"\
    //     allowfullscreen="true"\
    //     wmode="opaque"\
    //     allowTransparency="true"\
    //     frameborder="0"\
    //     type="application/x-shockwave-flash"></iframe>\
    // ';

    $.closeModal();
    $.modal({
        title: "",
        text: ' ',
        buttons: [{
                text: "更多视频",
                onClick: function() {
                    openVideoList();
                }
            },
            {
                text: "关闭",
                className: "default",
                onClick: function() {}
            },
        ]
    });
    setTimeout(function() {
        var text = '\
            <video \
            webkit-playsinline="true" \
            x-webkit-airplay="true" \
            playsinline="true" \
            x5-video-player-type="h5" \
            x5-video-player-fullscreen="true" \
            width="100%" height="100%" preload="auto" poster="" controls="controls" \
            onended=openVideoList()\
            src="' + href + '"></video>\
        ';
        $('.weui-dialog__bd').html(text);
    }, 100);

    // $('body').append('\
    //     <iframe src="http://player.youku.com/embed/XMzU5Mzc5NjYwMA==" allowscriptaccess="always"\
    //     allowfullscreen="true"\
    //     wmode="opaque"\
    //     allowTransparency="true"\
    //     frameborder="0"\
    //     type="application/x-shockwave-flash"></iframe>\
    // ');

    setWeuiDialogStyle(true);

}

function openVideoList() {
    var text = '\
        <div style="padding: 15px 10px;">\
            <div class="container">\
                <div class="row">\
    ';
    datas.slideInfoData.vedioInfo.map((i,k) => {
        text += '\
            <div class="col-xs-6 col-sm-4" style="padding-top: 33.33333333%; height: 0; position: relative;" onClick="loadVideo(\'' + i.url + '\')">\
                <img src="' + datas.imgHref + i.thumb + '" alt="" style="position: absolute; top: 4%; left: 4%; width: 92%; height: 92%;">\
                <p style="position: absolute;bottom: 4%;left: 4%;width: 92%;margin: 0;line-height: 27px;font-size: 12px;background: rgba(36, 36, 36, 0.5);color: #fff;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">' + i.title + '</p>\
            </div>';
    });
    text += '</div>\
        </div>\
        </div>\
    ';

    $.closeModal();
    $.modal({
        title: "",
        text: text,
        buttons: [{
            text: "返回",
            className: "default",
            onClick: function() {
                loadVideo(index);
            },
        }, {
            text: "关闭",
            className: "default",
            onClick: function() {
                console.log(3);
            }
        }]
    });

    setWeuiDialogStyle();
}

function setWeuiDialogStyle(isNoScroll) {
    var dialog = $('.weui-dialog');
    var head = $('.weui-dialog__hd');
    var body = $('.weui-dialog__bd');
    var foot = $('.weui-dialog__ft');

    head.css({
        'display': 'none',
    });

    body.css({
            'overflow': isNoScroll == true ? 'hidden' : 'auto',
        })
        .css({
            height: head.css('display') == 'none' ? dialog.outerHeight() - foot.outerHeight() + 'px' : dialog.outerHeight() - head.outerHeight() - foot.outerHeight() + 'px'
        });

    console.log(dialog.outerHeight());
    console.log(head.outerHeight());
    console.log(foot.outerHeight());
}

// 侧边划出的视频列表
function slideInfoShow(senseId, potinId, pointTitle) {
    var old = $('.slide-info');
    old.removeClass('on');

    // 动画的时间
    setTimeout(function() {
        old.remove();
    }, 800);

    var obj = $('<div class="slide-info"><div class="iscroll-wrap"></div></div>').appendTo('body');
    obj.find('.iscroll-wrap').append('\
    <i class="colse iconfont icon-guanbi" onclick="slideInfoHide()"></i>\
    <div class="title"></div>\
    <div class="info"></div>\
    <div class="list"></div>\
    ');

    $.post(
        'http://47.106.70.15:8000/index.php/Overview/getHotInfo',
        {
            sence_id: senseId,
            hot_id: potinId,
            user_id: getCookie('id'),
            user_name: getCookie('user'),
            role: getCookie('role'),
        },
        function(data) {
            var data = JSON.parse(data);
            datas.slideInfoData = data;

            obj.find('.title').html(data.hotInfo.title);
            obj.find('.info').html(data.hotInfo.description);

            if (data.vedioInfo.length == 0) {
                obj.css('height', 'auto').find('.iscroll-wrap').css('padding-bottom', 0);
            }
            var listHtml = '';
            for (var i in data.vedioInfo) {
                listHtml += '\
                <div class="wrap" onclick="loadVideo(\'' + data.vedioInfo[i].url + '\')">\
                    <div class="left"><img src="' + datas.imgHref + data.vedioInfo[i].thumb + '" alt=""></div>\
                    <div class="right"><p>' + data.vedioInfo[i].title + '</p><span>' + data.vedioInfo[i].description + '</span></div>\
                </div>\
                ';
            }
            obj.find('.list').html(listHtml);




            obj.addClass('on');
            datas.myScroll = new IScroll('.slide-info.on', {
                mouseWheel: true,
                scrollbars: true,
                click: true,
            });
        }
    );
}

function slideInfoHide() {
    var old = $('.slide-info');
    old.removeClass('on');

    // 动画的时间
    setTimeout(function() {
        old.remove();
    }, 800);
}

// 阻止外部滚动（失败）
$.fn.scrollUnique = function() {
    return $(this).each(function() {
        var eventType = 'mousewheel';
        if (document.mozHidden !== undefined) {
            eventType = 'DOMMouseScroll';
        }
        $(this).on(eventType, function(event) {
            // 一些数据
            var scrollTop = this.scrollTop,
                scrollHeight = this.scrollHeight,
                height = this.clientHeight;

            var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0);

            if ((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) {
                // IE浏览器下滚动会跨越边界直接影响父级滚动，因此，临界时候手动边界滚动定位
                this.scrollTop = delta > 0? 0: scrollHeight;
                // 向上滚 || 向下滚
                event.preventDefault();
            }
        });
    });
};

// $(document).ready(function() {
//     stopDrop();
//     alert(1);
// });
// function stopDrop() {
//     var lastY;//最后一次y坐标点
//     $(document.body).on('touchstart', function(event) {
//         lastY = event.originalEvent.changedTouches[0].clientY;//点击屏幕时记录最后一次Y度坐标。
//     });
//     $(document.body).on('touchmove', function(event) {
//         var y = event.originalEvent.changedTouches[0].clientY;
//         var st = $(this).scrollTop(); //滚动条高度
//         if (y >= lastY && st <= 10) {//如果滚动条高度小于0，可以理解为到顶了，且是下拉情况下，阻止touchmove事件。
//             lastY = y;
//             event.preventDefault();
//         }
//         lastY = y;
//     });
// }


// $("body").height( $(window).height() );
// $('body').on('touchmove', function (event) {
//     event.preventDefault();
// });


// var text = '\
// <div class="weui-panel weui-panel_access" style="text-align: left;">\
//     <div class="weui-panel__bd">\
//         <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">\
//             <div class="weui-media-box__hd">\
//                 <img class="weui-media-box__thumb" src="http://placehold.it/300x300" alt="">\
//             </div>\
//             <div class="weui-media-box__bd">\
//                 <h4 class="weui-media-box__title">标题一</h4>\
//                 <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>\
//             </div>\
//         </a>\
//         \
//         <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">\
//             <div class="weui-media-box__hd">\
//                 <img class="weui-media-box__thumb" src="http://placehold.it/300x300" alt="">\
//             </div>\
//             <div class="weui-media-box__bd">\
//                 <h4 class="weui-media-box__title">标题一</h4>\
//                 <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>\
//             </div>\
//         </a>\
//         <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">\
//             <div class="weui-media-box__hd">\
//                 <img class="weui-media-box__thumb" src="http://placehold.it/300x300" alt="">\
//             </div>\
//             <div class="weui-media-box__bd">\
//                 <h4 class="weui-media-box__title">标题一</h4>\
//                 <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>\
//             </div>\
//         </a>\
//         \
//         <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">\
//             <div class="weui-media-box__hd">\
//                 <img class="weui-media-box__thumb" src="http://placehold.it/300x300" alt="">\
//             </div>\
//             <div class="weui-media-box__bd">\
//                 <h4 class="weui-media-box__title">标题一</h4>\
//                 <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>\
//             </div>\
//         </a>\
//         <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">\
//             <div class="weui-media-box__hd">\
//                 <img class="weui-media-box__thumb" src="http://placehold.it/300x300" alt="">\
//             </div>\
//             <div class="weui-media-box__bd">\
//                 <h4 class="weui-media-box__title">标题一</h4>\
//                 <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>\
//             </div>\
//         </a>\
//         \
//         <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">\
//             <div class="weui-media-box__hd">\
//                 <img class="weui-media-box__thumb" src="http://placehold.it/300x300" alt="">\
//             </div>\
//             <div class="weui-media-box__bd">\
//                 <h4 class="weui-media-box__title">标题一</h4>\
//                 <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>\
//             </div>\
//         </a>\
//         <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">\
//             <div class="weui-media-box__hd">\
//                 <img class="weui-media-box__thumb" src="http://placehold.it/300x300" alt="">\
//             </div>\
//             <div class="weui-media-box__bd">\
//                 <h4 class="weui-media-box__title">标题一</h4>\
//                 <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>\
//             </div>\
//         </a>\
//         \
//         <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">\
//             <div class="weui-media-box__hd">\
//                 <img class="weui-media-box__thumb" src="http://placehold.it/300x300" alt="">\
//             </div>\
//             <div class="weui-media-box__bd">\
//                 <h4 class="weui-media-box__title">标题一</h4>\
//                 <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>\
//             </div>\
//         </a>\
//         <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">\
//             <div class="weui-media-box__hd">\
//                 <img class="weui-media-box__thumb" src="http://placehold.it/300x300" alt="">\
//             </div>\
//             <div class="weui-media-box__bd">\
//                 <h4 class="weui-media-box__title">标题一</h4>\
//                 <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>\
//             </div>\
//         </a>\
//         \
//         <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">\
//             <div class="weui-media-box__hd">\
//                 <img class="weui-media-box__thumb" src="http://placehold.it/300x300" alt="">\
//             </div>\
//             <div class="weui-media-box__bd">\
//                 <h4 class="weui-media-box__title">标题一</h4>\
//                 <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>\
//             </div>\
//         </a>\
//     </div>\
// </div>\
// ';
